<script setup lang="ts">
import { computed } from 'vue';
import searchIcon from '@/assets/images/IntegralLedger/ico_1.png';

const props = defineProps<{
  modelValue: string;
}>();

const emit = defineEmits<{
  (e: 'update:model-value', value: string): void;
  (e: 'change', value: string): void;
  (e: 'onSearch'): void;
}>();

const keyword = computed({
  get() {
    return props.modelValue;
  },
  set(value: string) {
    emit('update:model-value', value);
    emit('change', value);
  },
});

const handleSearch = () => {
  emit('onSearch');
};
</script>
<template>
  <div class="rounded-full bg-white overflow-hidden">
    <van-field
      class="!py-1 !pr-0"
      label-class="!text-[#666]"
      v-model="keyword"
      placeholder="搜索手机号或邀请码"
      clearable
      @keyup.enter="handleSearch"
    >
      <template #left-icon>
        <div class="h-full flex items-center">
          <van-image width="16" height="16" :src="searchIcon" />
        </div>
      </template>
      <template #button>
        <div class="h-full flex items-center pr-1">
          <van-button class="!px-3 !h-[28px]" color="#EC2D69" type="primary" size="mini" round @click="handleSearch">
            搜索
          </van-button>
        </div>
      </template>
    </van-field>
  </div>
</template>
